<template>
    <div class="container">
        <div class="rowOne">
            <p class="oneP">推广目标</p>
            <p class="twoP" style="font-weight:100">以汽车品牌的曝光为主要推广目标，广告要覆盖到潜在兴趣人群，着重知名媒体上的传播</p>
            <button class="oneButton" @click="connectQQ">免费咨询</button>
        </div>
        <div class="rowTwo">
        <ul>
            <li v-for="(item,index) in list1" :key="index" @mouseover="show(index)">
                <img :src="list2[index][0]" alt="" class="img-style">
                <p>{{item[0]}}</p>
                <p>{{item[1]}}</p>
                <p>{{item[2]}}</p>
                <!-- <p>{{item[3]}}</p> -->
                <!-- <img src="../../assets/img/mediaIn/provide/line.png" alt=""> -->
            </li>
        </ul>
    </div>
    </div>
</template>
<script>
const img1 = require('../../assets/img/mediaIn/provide/61.png')
const img2 = require('../../assets/img/mediaIn/provide/62.png')
const img3 = require('../../assets/img/mediaIn/provide/63.png')
const img4 = require('../../assets/img/mediaIn/provide/64.png')
const img5 = require('../../assets/img/mediaIn/provide/65.png')
const img6 = require('../../assets/img/mediaIn/provide/66.png')
export default {
  data() {
    return {
      list1: [
        [
          "过程转化",
          "曝光量",
          "总曝光量",
          "直投、实时竞价等多种交易模式"
        ],
        [
          "转化目标",
          "提交表单",
          "转化具体用户需求",
          "共享收益新机遇"
        ],
      ],
      list2: [[img1, img4], [img2, img5], [img3, img6]]
    };
  },
  methods: {
    show(index) {
      this.list2[0][0] = img1;
      this.list2[1][0] = img2;
      this.list2[2][0] = img3;
      this.list2[index].splice(0, 1, this.list2[index][1]);
    }
  }
};
</script>
<style scoped>
.fluid {
  width: 100%;
  height: 300px;
  background: url("../../assets/img/二类电商/免费咨询/bg1.png");
  margin-top: 60px;
  overflow: hidden;
}
.bold {
  font-size: 30px;
  font-weight: bold;
}
.rowTwo {
  margin-top: 60px;
}
.rowTwo ul {
  overflow: hidden;
  height: 280px;
  padding-left: 10px;
  position: relative;
}
.rowTwo ul li {
  /* 336 * 3  1008 192 96 */
  /* 336 *2 672 548 */
  width: 336px;
  height: 235px;
  text-align: center;
  float: left;
  /* margin-left: 86px; */
  position: relative;
}
.img-style {
  width: 336px;
  height: 235px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
}
.rowTwo ul li:nth-child(1) {
  margin-left: 200px;
  background-position: top center;
  background-repeat: no-repeat;
}
.rowTwo ul li:nth-child(2) {
  background-position: top center;
  background-repeat: no-repeat;
  margin-left: 60px;
}
.rowTwo ul li:nth-child(3) {
  background-position: top center;
  background-repeat: no-repeat;
}
.rowTwo ul li p {
  font-size: 16px;
  color: rgb(34, 34, 34);
  font-weight: bold;
}
.rowTwo ul li p:nth-child(2) {
  position: absolute;
  font-size: 16px;
  color: #fff;
  top: 45px;
  left: 136px;
}
.rowTwo ul li p:nth-child(3) {
  margin-top: 128px;
}
.rowTwo ul li p:nth-child(4),
.rowTwo ul li p:nth-child(5) {
  margin-top: 20px;
}
.rowTwo ul li img {
  margin-top: 30px;
}
.rowOne {
  width: 1200px;
  margin: 0 auto;
  margin-top: 80px;
  text-align: center;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.ulOne p {
  font-size: 16px;
}
.ulOne > li {
  /* 240 */
  width: 20%;
  float: left;
  height: 300px;
  text-align: center;
  position: relative;
}
.ulTwo {
  width: 100%;
  height: 300px;
  text-align: center;
}
.ulTwo p {
  color: #fff;
}
.ulTwo > img {
  margin-top: 84px;
}
.ulTwo > p:nth-child(2) {
  margin-top: 38px;
}
.ulThree {
  width: 100%;
  height: 334px;
  background: url("../../assets/img/二类电商/免费咨询/bg2.png") center;
  position: absolute;
  top: -14px;
  left: 0;
  text-align: center;
}
.ulThree p {
  font-weight: bold;
}
.ulThree > div > img {
  margin-top: 69px;
}
.ulThree > img:nth-child(2) {
  margin-top: 39px;
}
.ulThree > p:nth-child(3) {
  margin-top: 39px;
}

.oneButton {
    box-shadow: 0px 4px 19px #ed9191;
}
</style>